<template>
    <div>
        <el-button type="primary" @click="addBook" style="margin-button: 10px">
            新增图书
        </el-button>
        <el-dialog
            title="图书详情"
            v-model="dialogVisible"
            width="400px"
            :before-close="dialogBeforeClose"
            destroy-on-close="true"
            open-delay:5000
        >
            <BooksEdit ref="BooksRef" @close="closeDialog" :id="id"></BooksEdit>
        </el-dialog>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="图书编号" width="200" />
            <el-table-column prop="name" label="图书名称" width="200" />
            <el-table-column prop="name" label="作者" width="200" />
            <el-table-column prop="price" label="价格" width="200" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" @click="bookDetails(row)">
                        详情
                    </el-button>
                    <el-button type="primary" @click="editBook(row)">
                        修改
                    </el-button>
                    <el-button type="danger" @click="deleProductItem(row)"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import BooksEdit from "../../components/BooksEdit.vue";
import { ref, reactive, onMounted } from "vue";
import { getBooksList, delBook } from "../../api/api";
import { ElMessageBox } from "element-plus";
import { SortUp } from "@element-plus/icons-vue";

const BooksRef = ref();
const id = ref();

const tableData = ref([]);
const dialogVisible = ref(false);
//数据展示
onMounted(() => {
    loadBooksList();
});

//图书详情展示
const bookDetails = (row) => {
    dialogVisible.value = true;
    id.value = row.id;
    console.log(id.value);
};

//新增加图书
const addBook = () => {};
const loadBooksList = async () => {
    tableData.value = await getBooksList();
};

//编辑功能
const editBook = (pid) => {};

//删除功能
const deleBookItem = async (pid) => {
    ElMessageBox.confirm("确定删除吗？", {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(async () => {
        if (await delBook({ id: pid })) {
            loadBooksList();
        }
    });
};

const dialogBeforeClose = () => {
    //确认框提示
    ElMessageBox.confirm("确认要关闭吗？", {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(() => {
            dialogVisible.value = false;
            BooksRef.value.resetF();
        })
        .catch(() => {});
};
const closeDialog = () => {
    dialogVisible.value = false;
    BooksRef.value.resetF();
};
</script>